<template>
  <div class="forget flex js-ct">
    <div class="box mt-90 flex flex-column js-ct align-center">
      <div class="title text-30 share-color">
        {{ $t("exchange.reset") }}{{ $t("login.password") }}
      </div>
      <div class="login-box radius second-bg">
        <div class="tab text-14 flex js-st point" v-if="state.active === 1">
          <div
            class="tab-box"
            :class="state.tabid === 1 ? 'tabactive text-t1' : 'text-t2'"
            @click="changeTab(1)"
          >
            {{ $t("user.phoneVerification") }}
          </div>
          <div
            class="tab-box"
            :class="state.tabid === 2 ? 'tabactive text-t1' : 'text-t2'"
            @click="changeTab(2)"
          >
            {{ $t("user.emailVerification") }}
          </div>
        </div>
        <el-form
          v-if="state.active === 1"
          :model="state.param"
          :rules="state.rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <div>
            <el-form-item
              class="mb-20"
              :prop="state.tabid === 1 ? 'user_phone_number' : ''"
              v-show="state.tabid === 1"
            >
              <SelectCountry
                @selectCountry="selectCountry"
                @inputPhone="inputPhone"
              />
            </el-form-item>
            <div class="mb-20" v-show="state.tabid === 2">
              <el-form-item
                class="mb-20"
                :prop="state.tabid === 2 ? 'user_email' : ''"
              >
                <el-input
                  v-model="state.param.user_email"
                  :placeholder="$t('formTip.emailTip')"
                ></el-input>
              </el-form-item>
            </div>
            <div class="mb-20">
              <el-form-item class="mb-20" prop="verification_code">
                <SendCode
                  @inputCode="inputCode"
                  @getKey="getKey"
                  :param="state.param"
                  :fond="state.tabid"
                />
              </el-form-item>
            </div>
          </div>
          <div class="mb-20" v-if="state.active === 1">
            <el-button
              style="width:100%;height:46px"
              v-loading="state.loading"
              @click="nextPage('ruleForm')"
              class="login-btn share-color"
              >{{ $t("formTip.next") }}</el-button
            >
          </div>
          <div class="mb-10 text-right text-14 text-t2">
            {{ $t("login.noAccount") }}?
            <router-link
              to="/register"
              replace
              class="text-login text-14 font-weight"
              >{{ $t("register.register") }}</router-link
            >
          </div>
          <!-- </div> -->
        </el-form>
        <el-form
          v-if="state.active === 2"
          :model="state.param"
          :rules="state.rules"
          ref="passWordForm"
          class="demo-ruleForm"
        >
          <div class>
            <div class="mb-20">
              <el-form-item class="mb-20" prop="user_password">
                <el-input
                  ref="password"
                  :type="state.passwordType"
                  v-model="state.param.user_password"
                  :placeholder="$t('formTip.passwordTip')"
                >
                  <template #suffix>
                    <span class="show-pwd" @click="showPwd">
                      <svg-icon
                        :data_iconName="
                          state.passwordType === 'password'
                            ? 'ic_eye'
                            : 'ic_eye_open'
                        "
                      />
                    </span>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="mb-30">
              <el-form-item class="mb-20" prop="user_confirm_password">
                <el-input
                  ref="confirmPassword"
                  :type="state.confirmPasswordType"
                  v-model="state.param.user_confirm_password"
                  :placeholder="$t('register.confirmPasswordTip')"
                >
                  <template #suffix>
                    <span class="show-pwd" @click="showConfirmPwd">
                      <svg-icon
                        :data_iconName="
                          state.confirmPasswordType === 'password'
                            ? 'ic_eye'
                            : 'ic_eye_open'
                        "
                      />
                    </span>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="mb-20" v-if="state.active === 2">
              <el-button
                style="width:100%;height:46px"
                v-loading="state.loading"
                @click="resetForm('passWordForm')"
                class="login-btn share-color"
                >{{ $t("exchange.reset") }}</el-button
              >
            </div>
            <div class="mb-10 text-right text-14 text-t2">
              {{ $t("login.noAccount") }}?
              <router-link
                to="/register"
                replace
                class="text-login text-14 font-weight"
                >{{ $t("register.register") }}</router-link
              >
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import SelectCountry from "@/components/selectCountry/SelectCountry.vue";
import SendCode from "@/components/sendCode/SendCode.vue";
import { reactive, ref, nextTick, onMounted } from "vue";
import { useRouter } from "vue-router";
import { findPasswordPhone, findPasswordEmail } from "@/api/user";
import { passwordRule, phoneRule, emailRule } from "@/utils/formValidation";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
export default {
  components: {
    SelectCountry,
    SendCode,
  },
  setup() {
    const { t } = useI18n();
    var Password = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("*" + t("formTip.passwordTip")));
      } else {
        if (!passwordRule.reg.test(value)) {
          callback(new Error("*" + passwordRule.message));
        } else {
          callback();
        }
      }
    };
    var confirmPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("*" + t("formTip.comfirmPassTip")));
      } else {
        if (state.param.user_password !== value) {
          callback(new Error("*" + t("formTip.passDifTip")));
        } else {
          callback();
        }
      }
    };
    var phone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("*" + t("formTip.phoneTip")));
      } else {
        if (!phoneRule.reg.test(value)) {
          callback(new Error("*" + phoneRule.message));
        } else {
          callback();
        }
      }
    };
    var Email = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("*" + t("formTip.emailTip")));
      } else {
        if (!emailRule.reg.test(value)) {
          callback(new Error("*" + emailRule.message));
        } else {
          callback();
        }
      }
    };
    const state = reactive({
      clientH: 0,
      tabid: 1,
      active: 1,
      param: { type: "find" },
      rules: {
        user_phone_number: [{ validator: phone, trigger: "blur" }],
        verification_code: [
          { required: true, message: t("formTip.codeTip"), trigger: "blur" },
        ],
        user_email: [{ validator: Email, trigger: "blur" }],
        user_password: [{ validator: Password, trigger: "blur" }],
        user_confirm_password: [{ validator: confirmPass, trigger: "blur" }],
      },
      loading: false,
      passwordType: "password",
      confirmPasswordType: "password",
    });
    /**
     *methods
     */
    // 密码显示隐藏
    const password = ref(null);
    const confirmPassword = ref(null);
    const showPwd = () => {
      if (state.passwordType === "password") {
        state.passwordType = "text";
      } else {
        state.passwordType = "password";
      }
      nextTick(() => {
        password.value.focus();
      });
    };
    const nextPage = () => {
      ruleForm.value.validate((valid) => {
        if (valid) {
          state.active = 2;
        } else {
          console.log("error");
        }
      });
    };
    const showConfirmPwd = () => {
      if (state.confirmPasswordType === "password") {
        state.confirmPasswordType = "text";
      } else {
        state.confirmPasswordType = "password";
      }
      nextTick(() => {
        confirmPassword.value.focus();
      });
    };
    // 返回
    const back = () => {
      $router.go(-1);
    };
    const $router = useRouter();
    // 选择国家
    const selectCountry = (data) => {
      state.param.user_area_code = data.user_area_code;
    };
    // 输入手机号
    const inputPhone = (obj) => {
      state.param = Object.assign(state.param, obj);
    };
    const changeTab = (i) => {
      // state.param = { type: "find" };
      console.log("tabid", i);
      state.tabid = i;
    };
    // 输入验证码
    const inputCode = (val) => {
      state.param.verification_code = val;
    };
    // 获取验证码的key
    const getKey = (key) => {
      state.param.key = key;
    };
    let ruleForm = ref(null);
    let passWordForm = ref(null);
    const resetForm = () => {
      passWordForm.value.validate((valid) => {
        if (valid) {
          const requestFun =
            state.tabid === 1 ? findPasswordPhone : findPasswordEmail;
          if (state.tabid === 1) {
            state.param.user_email = "";
          } else {
            state.param.user_phone_number = "";
          }
          state.loading = true;
          requestFun(state.param)
            .then((res) => {
              state.loading = false;
              if (res.code === 200) {
                ElMessage.success(res.message);
                $router.push("/login");
              }
            })
            .catch(() => {
              state.loading = false;
            });
        } else {
          console.log("error");
        }
      });
    };
    onMounted(() => {
      state.clientH = window.innerHeight;
    });
    return {
      state,
      changeTab,
      resetForm,
      selectCountry,
      inputPhone,
      ruleForm,
      inputCode,
      getKey,
      back,
      showPwd,
      showConfirmPwd,
      password,
      confirmPassword,
      nextPage,
      passWordForm,
    };
  },
};
</script>
<style lang="less" scoped>
.forget {
  width: 100%;
  min-height: calc(100% - 60px);
  position: fixed;
  top: 60px;
  left: 0;
  // height: 800px;
  background-image: url("../assets/theme1/loginbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.mt-90 {
  margin-top: 90px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-70 {
  margin-bottom: 70px;
}
.font-weight {
  font-weight: bold;
}
.login-box {
  width: 400px;
  // min-height: 425px;
  padding: 30px;
  box-sizing: border-box;
}
.title {
  font-family: PingFang SC;
  margin-bottom: 40px;
  font-style: Semibold;
}
.tab {
  line-height: 40px;
  height: 40px;
  margin-bottom: 20px;
}
.phone {
  margin-inline-end: 30px;
}
.tabactive {
  position: relative;
  font-weight: bold;
  font-family: PingFang SC;
  font-style: Semibold;
  background: @tab-active;
}
// .tabactive::after {
//   content: "";
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 44px;
//   height: 4px;
//   background: @login-dark;
//   border-radius: 4px;
// }
.float {
  float: left;
  margin-top: 5px;
}
.tab-box {
  width: 170px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
}
</style>
